<script setup lang="ts">
import {Component, computed} from 'vue';
import {ref, watch} from 'vue';
import IconCode from '../Icons/IconCode.vue';
import SourceCode from '../SourceCode/index.vue';
import {ElIcon} from 'element-plus';
import {CaretTop} from '@element-plus/icons-vue';

const props = defineProps({
  source: {
    type: String,
  },
  path: {
    type: String,
  },
  type: {
    type: String,
    default: "vue-content-extractor",
  }
});

type ButtonItemType = {
  components: Component;
  name: string;
  tips: string;
  type: string;
};
const sourceVisible = ref(false);

const toggleSourceVisible = (val: boolean) => {
  sourceVisible.value = val;
};

const sourceCodeRef = ref<InstanceType<typeof SourceCode> | null>(null);

const clickIcon = () => {
  toggleSourceVisible(!sourceVisible.value);
};

// const codeText = ref<any>('');


const codeText = computed(() => {
  return decodeURIComponent(props.source)
})


defineOptions({
  inheritAttrs: false
})

</script>

<template>
  <ClientOnly>
  <div class="dev-g-example-box">
    <div class="dev-g-example-context">
        <slot name="source" />
    </div>
    <div class="dev-g-function-buttons-box">
      <el-tooltip
          key="code"
          effect="dark"
          :content="sourceVisible ? '关闭源代码' : '查看源代码'"
          placement="bottom"
      >
        <IconCode @click="clickIcon()" class="icon-class"/>
      </el-tooltip>
    </div>
    <ElCollapseTransition>
      <SourceCode ref="sourceCodeRef" v-if="sourceVisible" :source="codeText"></SourceCode>
    </ElCollapseTransition>
    <Transition name="el-fade-in-linear">
      <div
          v-show="sourceVisible"
          class="example-float-control"
          tabindex="0"
          role="button"
          @click="toggleSourceVisible(false)"
      >
        <ElIcon :size="16">
          <CaretTop/>
        </ElIcon>
        <span>隐藏代码</span>
      </div>
    </Transition>
  </div>
  </ClientOnly>
</template>
<style scoped lang="scss">
.dev-g-example-box {
  position: relative;
  border: 1px solid var(--dev-g-border-color);
  border-radius: 4px;

  .dev-g-example-context {
    padding: 20px;
  }

  .dev-g-function-buttons-box {
    height: 40px;
    width: 100%;
    z-index: 11;
    background-color: var(--dev-g-theme-background);
    border-top: 1px solid var(--dev-g-border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius:0 0 4px 4px;

    .icon-class {
      cursor: pointer;
      margin-right: 15px;
      color: var(--dev-font-light-color);
    }
  }
}


.example-float-control {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--dev-g-border-color);
  height: 40px;
  box-sizing: border-box;
  background-color: var(--dev-g-theme-background);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-top: -1px;
  color: var(--dev-font-light-color);
  cursor: pointer;
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;

  span {
    font-size: 14px;
    margin-left: 10px;
  }

  &:hover {
    color: var(--dev-g-primary-color);
  }
}
</style>
